<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <div>

    <div>
      <div class="card-head">
        <div class="cell-title">项目质控监控</div>
<!--        <div class="cell-tjtext">在控失控</div>-->
        <div class='cell-ser'>
          <el-select v-model="dateLine" @change="handleDateChange" placeholder="请选择时间">
            <el-option
              v-for="item in dateLineOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <!--                        <el-select v-model="pro" placeholder="请选择项目" >-->
          <!--                        <el-option-->
          <!--                            v-for="item in proOptions"-->
          <!--                            :key="item.value"-->
          <!--                            :label="item.label"-->
          <!--                            :value="item.value">-->
          <!--                        </el-option>-->
          <!--                        </el-select>-->
        </div>
      </div>
    </div>
    <div id="echartsLine" style="width:100%;height: 400px;">
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import {selectQualityEchart} from "@/api/business/homePage"
import {parseTime, getNearWeek, nowDate, oneMonth, haflYear, reactYear} from '@/utils/ruoyi'

export default {
  name: "EchartsLine",
  data() {
    return {
      charts: '',
      /*  opinion: ["1", "3", "3", "4", "5"],*/
      opinionData: [],
      xOptions: [],
      yOptions: [],
      indexShow: false,
      indexDate: [],
      dateLineOptions: [{
        value: '1',
        label: '最近30天'
      }, {
        value: '2',
        label: '最近一周'
      }, {
        value: '3',
        label: '最近半年'
      }, {
        value: '4',
        label: '最近一年'
      }],
      proOptions: [],
      pro: '',
      dateLine: '1',
      queryParams: {
        startTime: '',
        endTime: ''
      }
    }
  },
  watch: {},
  created() {
    this.$nextTick(() => {
      this.queryParams.startTime = parseTime(oneMonth())
      this.queryParams.endTime = parseTime(nowDate())
      this.initLineOptions()
    })
  },
  methods: {
    handleDateChange() {
      this.indexShow = false
      switch (this.date) {
        case '1':
          this.queryParams.startTime = parseTime(oneMonth())
          break;
        case '2':
          this.queryParams.startTime = parseTime(getNearWeek(-7))
          break;
        case '3':
          this.queryParams.startTime = parseTime(haflYear())
          break;
        case '4':
          this.queryParams.startTime = parseTime(reactYear())
          break;
        default:
          this.queryParams.startTime = parseTime(oneMonth())
          this.queryParams.endTime = parseTime(nowDate())
          break;
      }
      this.initLineOptions()
    },
    initLineOptions() {
      // x 轴
      this.xOptions = this.getList(0, 23, 1)
      // y轴
      this.yOptions = this.getList(0, 5, 250)
      selectQualityEchart(this.queryParams).then((res) => {
        if (res) {
          let out = []
          let count = []
          res.forEach((item) => {
            out.push(item.outCount)
            count.push(item.count)
          })
          //值
          this.opinionData = count
          this.opinionData2 = out
        }
        this.drawLine('echartsLine')
      })
    },
    getList(initNum, length, dValue) {
      let list = [initNum]
      for (let i = 1; i < length; i++) {
        list.push(0 + i * dValue)
      }
      return list
    },
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xOptions
        },
        yAxis: {
          // type: 'value'
          type: 'value',
          boundaryGap: false,
          data: this.yOptions
        },
        series: [{
          name: '在控',
          type: 'line',
          lineStyle: {color: 'blue'},
          data: this.opinionData
        },
          {
            name: '失控',
            type: 'line',
            // lineStyle:{ color:'yellow' },
            data: this.opinionData2
          }]
      })
    }
  },
  //调用
  mounted() {
    this.$nextTick(function () {
      this.drawLine('echartsLine')
    })
  }
};
</script>
